#include("common.html")
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商城</title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/vant.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <script type="text/javascript" src="#(tpath)/static/js/jquery.js"></script>
    <style type="text/css">
    #tabHeader .van-tab--active:before {
    content: '';
    width: 40%;
    height: 0px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -20%;
    z-index: 4;
    background-color: #f23030;
    border-radius: 120px;
    border: 1px solid #f23030;
    </style>
  </head>
  
  <body class="">
    <style type="text/css">@media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125% !important; } } @media only screen and (min-width: 750px){ html { font-size: 150% !important; } } @media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } }</style>
    <!-- 样式 Start -->
    <style type="text/css" lang="less">/* 订单列表样式 */ #orders .van-panel{padding:0px;margin-bottom:10px;} #orders .van-panel__content{padding:0px;background:#fafafa;} #orders .van-panel__content img{border:1px solid #eee;width:80px;height:80px;} #orders .van-panel__footer{padding:10px;text-align: right;} #orders {background-color:#f5f5f5;width:100%;padding-bottom: 50px;} #orders .cls_btn{padding:1rem} #orders .img{margin: 5px;float: left;} #orders .van-cell__label { color: #969799; font-size: 12px; margin-top: -2px; line-height: 18px; } .van-cell:not(:last-child)::after{ left: 0px; } .null-data{ width: 100%; text-align: center; margin: 8rem auto; } .order-cell-title{ flex: 1.5; } .order-cell-value{ flex: 0.5; } .no-data{ width: 100%; height:100%; padding-top: 70px; text-align: center; font-size: 12px; color: #d9d9d9; } .tabs-content{ margin-top: 50px; } .total_goods{ width: 80px; height: 90px; line-height: 90px; text-align: center; color: #eb8e4f; font-size: 14px; float: right; } .wechat-customer .wechat-bg{background:#333;opacity:0.5;width:100%;z-index:999;position:fixed;top:0;bottom:0;} .wechat-customer .wechat-cont{width:12rem;background:#fff;border-radius:5px;position:fixed;top:50%;left:50%;margin-left:-8rem;z-index:999;text-align:center;padding:2rem;margin-top:-10rem;} .wechat-customer .wechat-cont img{width:10rem;height:10rem;} .wechat-customer .wechat-cont .closewindow{position:absolute;right:1rem;top:1rem;} .wechat-customer .wechat-cont .button1{width: 12rem; height: 2rem; line-height: 2rem; border: 0px; margin: 0rem auto 0 auto; color: #999; font-size: 12px;} .wechat-customer .wechat-cont .button2{width:12.1rem;height:2rem;background:#2ba246;color:#fff;border:1px solid #2ba246;margin-top:0.5rem;} .van-card__price{ color: #323233; }</style>
    <!-- 样式 End -->
    <!-- 内容 Start -->
    <div id="orders" class="container">
      <!---->
      <form action="#(base)/member/order" method="get" id="searchkeywordForm">
      <input type="hidden" name="status" id="inputStatus" value="#(status)">
      <div class="van-search" style="background: rgb(242, 242, 242);">
        <div class="van-cell van-cell--borderless van-field">
          <i class="van-icon van-icon-search van-cell__left-icon">
            <!---->
            <!----></i>
          <!---->
          <div class="van-cell__value van-cell__value--alone">
            <div class="van-field__body">
              <input type="search" name="keyword" placeholder="请输入订单编号,商品名称,收件信息关键词" class="van-field__control" id="inputKeyword">
              <!---->
              <!---->
              <!----></div>
            <!----></div>
          <!----></div>
        <!----></div>
       </form>
      <div class="van-tabs van-tabs--line">
        <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom" style="">
          <div class="van-tabs__nav van-tabs__nav--line" id="tabHeader">
            <div class="van-tab #if(status??) #else van-tab--active #end" style="flex-basis: 17.6%;" tabIndex="1" status="">
              <span class="van-ellipsis">全部</span></div>
            <div class="van-tab #if(status?? && status=="PENDING_PAYMENT") van-tab--active #end" style="flex-basis: 17.6%;" tabIndex="2" status="PENDING_PAYMENT">
              <span class="van-ellipsis">待付款</span></div>
            <div class="van-tab #if(status?? && status=="PENDING_SHIPMENT") van-tab--active #end" style="flex-basis: 17.6%;" tabIndex="3" status="PENDING_SHIPMENT">
              <span class="van-ellipsis">待发货</span></div>
            <div class="van-tab #if(status?? && status=="SHIPPED") van-tab--active #end" style="flex-basis: 17.6%;" tabIndex="4" status="SHIPPED">
              <span class="van-ellipsis">已发货</span></div>
            <div class="van-tab #if(status?? && status=="COMPLETED") van-tab--active #end" style="flex-basis: 17.6%;" tabIndex="5" status="COMPLETED">
              <span class="van-ellipsis">已完成</span></div>
            <div class="van-tab #if(status?? && status=="CANCELED") van-tab--active #end" style="flex-basis: 17.6%;" tabIndex="6" status="CANCELED">
              <span class="van-ellipsis">已取消</span></div>
          </div>
        </div>
        <div class="van-tabs__content">
          <div class="van-tab__pane" #if(status??) style="display: none;" #else style="display: block;" #end id="tab_item_1">
            
            <!---->
            <!---->
            <!----></div>
           <div class="van-tab__pane" #if(status?? && status=="PENDING_PAYMENT") style="display: block;" #else style="display: none;" #end id="tab_item_2">
            <!---->
            <!----></div>
          <div class="van-tab__pane" #if(status?? && status=="PENDING_SHIPMENT") style="display: block;" #else style="display: none;" #end id="tab_item_3">
            <!---->
            <!----></div>
          <div class="van-tab__pane" #if(status?? && status=="SHIPPED") style="display: block;" #else style="display: none;" #end id="tab_item_4">
            <!---->
            <!----></div>
          <div class="van-tab__pane" #if(status?? && status=="COMPLETED") style="display: block;" #else style="display: none;" #end id="tab_item_5">
            <!---->
            <!----></div>
          <div class="van-tab__pane" #if(status?? && status=="CANCELED") style="display: block;" #else style="display: none;" #end id="tab_item_6">
            <!---->
            <!----></div>
        </div>
      </div>
    </div>
    <!-- 内容 End -->
    <!-- 逻辑 Start -->
    <div class="van-toast van-toast--default van-toast--middle" style="z-index: 2002; display: none;">
      <!---->
      <!---->
      <div class="van-loading van-loading--circular van-loading--white" style="color: white;">
        <span class="van-loading__spinner van-loading__spinner--circular">
          <svg viewBox="25 25 50 50" class="van-loading__circular">
            <circle cx="50" cy="50" r="20" fill="none"></circle>
          </svg>
        </span>
      </div>
      <div class="van-toast__text">加载中...</div></div>
    <!-- 逻辑 End -->
    <style>.van-tabbar{ height:55px; padding-bottom: 20px; } .suspend{ width: 100%; height: 100%; position: relative; z-index: 999; background-color: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; } .suspend-content{ width: 244px; height: 55px; position: fixed; top: 70%; z-index: 900; } .suspend-content-left{ width: 44px; height: 40px; background-color: rgba(0,0,0,.6); color: #fff; font-size: 8px; padding: 3px; box-sizing: border-box; border-top-left-radius:5px; border-bottom-left-radius:5px; margin-top: 10px; float: left; } .suspend-icon{ float: left; width: 10px; height: 30px; padding: 5px 0px; margin-right: 3px; font-size: 14px; } .suspend-navigation{ float: left; width: 25px; height: 30px; box-sizing: border-box; font-size: 10px; } .suspend-navigation2{ float: left; width: 25px; height: 30px; padding: 10px 0px; box-sizing: border-box; font-size: 10px; } .suspend-content-right{ width: 200px; height: 60px; background-color: #fff; float: left; border-top-left-radius:5px; border-bottom-left-radius:5px; padding: 15px 10px; box-sizing: border-box; } .suspend-content-right .van-col{ text-align: center; } .suspend-contact{ font-size: 20px; } .suspend-contact-text{ font-size: 10px; transform: scale(0.7); } .wechat-customer .wechat-bg{background:#333;opacity:0.5;width:100%;z-index:999;position:fixed;top:0;bottom:0;} .wechat-customer .wechat-cont{width:12rem;background:#fff;border-radius:5px;position:fixed;top:50%;left:50%;margin-left:-8rem;z-index:999;text-align:center;padding:2rem;margin-top:-10rem;} .wechat-customer .wechat-cont img{width:10rem;height:10rem;} .wechat-customer .wechat-cont .closewindow{position:absolute;right:1rem;top:1rem;} .wechat-customer .wechat-cont .button1{width: 12rem; height: 2rem; line-height: 2rem; border: 0px; margin: 0rem auto 0 auto; color: #999; font-size: 12px;} .wechat-customer .wechat-cont .button2{width:12.1rem;height:2rem;background:#2ba246;color:#fff;border:1px solid #2ba246;margin-top:0.5rem;} .icon-img{ border-radius: 50%; width: 50px; height: 50px; background-color: #fff; border: none; box-shadow: 0px 0px 10px 2px #e5e5e5; margin: -11px auto 0; position:relative; z-index:9999; line-height: 50px; align-items: center; display: table-cell; vertical-align: middle; } .icon-img img{ max-width: 50px; border-radius: 50%; } .van-tabbar-item__icon img{ height: auto; }</style>
    <!-- 底部内容-->
    <div id="footer">
      <!---->
      #include("footer.html")
    </div>
  </body>

</html>
<script type="text/javascript" src="#(tpath)/static/js/load.js"></script>
<script type="text/javascript">
$(".van-tab").on("click",function(){
	var pre = $("#tabHeader").find(".van-tab--active");
	pre.removeClass("van-tab--active");
	var preTabIndex = pre.attr("tabIndex");
	$("#tab_item_"+preTabIndex).hide();
	
	$(this).addClass("van-tab--active")
	var tabIndex = $(this).attr("tabIndex");
	var status = $(this).attr("status");
	getOrderListHtml("tab_item_"+tabIndex,status)
	$("#tab_item_"+tabIndex).show();
});

#if(status??)
#if(status=="PENDING_PAYMENT")
getOrderListHtml("tab_item_2","PENDING_PAYMENT");
#else if(status=="PENDING_SHIPMENT")
getOrderListHtml("tab_item_3","PENDING_SHIPMENT");
#else if(status=="SHIPPED")
getOrderListHtml("tab_item_4","SHIPPED");	
#else if(status=="COMPLETED")
getOrderListHtml("tab_item_5","COMPLETED");
#else if(status=="CANCELED")
getOrderListHtml("tab_item_6","CANCELED");
#end
#else
getOrderListHtml("tab_item_1","");
#end

function getOrderListHtml(itemId,status){
	$("#inputStatus").val(status);
	var param="";
	if(status!=""){
		param="?status="+status;
	}
	$.ajax({
        url: "#(base)/member/order/list"+param,
        type: "post",
        data: {},
        dataType: "text",
        success: function(res){
        	$("#"+itemId).html(res);
        },
        error: function(res){
        }
    });
}

$("#orders").on("click",".refundOrder",function(){
	if(confirm("确定要申请退款吗?")){
		var orderId = $(this).attr("orderId");
		$.ajax({
			url: "#(base)/order/refund",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});

$("#orders").on("click",".cancelOrder",function(){
	if(confirm("确定要取消吗?")){
		var orderId = $(this).attr("orderId");
		$.ajax({
	        url: "#(base)/order/cancel",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});
$("#orders").on("click",".deleteOrder",function(){
	if(confirm("确定要删除吗?")){
		var orderId = $(this).attr("orderId");
		$.ajax({
	        url: "#(base)/order/delete",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});
$("#orders").on("click",".completeOrder",function(){
	var orderId = $(this).attr("orderId");
	$.ajax({
        url: "#(base)/order/complete",
        type: "post",
        data: {"orderId":orderId},
        dataType: "json",
        success: function(res){
        	if(res.type=="success"){
       			location.href="#(base)/member/order"
       		}
        },
        error: function(res){
        }
    });
});
$("#orders").on("click",".payOrder",function(){
	var orderId = $(this).attr("orderId");
	var orderSn = $(this).attr("orderSn");
	var paymentType = "ORDER";
	location.href="#(base)/payment/pay?paymentMethod=WEIXINPAY_WECHAT&paymentType="+paymentType+"&sn="+orderSn;
});
</script>